<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp"%>
<!DOCTYPE html>
<html>
  
  <head>
  	<%@ include file="/common/meta.jsp"%>
    <title>音乐</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/style.min862f.css?v=4.1.0" rel="stylesheet"></head>
    <link href="/css/plugins/loaders/loaders.min.css" rel="stylesheet"></head>
  	<link href="/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  	<style>
  	.loader-inner>div{background: #1ab394;}
  	</style>
  <body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInUp">
      <div class="row">
        <div class="col-sm-12">
          <div class="ibox">
            <div class="ibox-title">
              <h5>所有歌曲</h5>
            </div>
            <div class="ibox-content">
              <div class="row m-b-sm" id="toolbar">
                <div class="col-md-1">
                  <button type="button" data-toggle="modal" id="plus-btn" data-target="#plus" class="btn btn-primary">
                    <i class="fa fa-plus"></i> 添加</button>
                </div>
                <div class="col-md-2">
                  <div class="input-group">
                    <input type="text" placeholder="请输入歌曲名" id="song" class="form-control">
                    <span class="input-group-btn">
                      <button type="button" id="btn-search" class="btn btn-primary"><i class="fa fa-search"></i></button></span>
                  </div>
                </div>
                <div class="col-md-1 text-right">
                	<label>分类</label>
                </div>
                <div class="col-md-2">
	                <select class="form-control" id="catId">
		                <option value="-1">全部</option>
		                <c:forEach items="${list}" var="cat">
		                	<option value="${cat.id}">${cat.name}</option>
		                </c:forEach>
		                <option value="0">未分类</option>
	                </select>
                </div>
                <div class="col-md-1 col-md-offset-5">
                  <button type="button" id="btn_delete" disabled class="btn btn-danger">
                    <i class="fa fa-remove"></i> 删除</button>
                </div>
              </div>
              <div class="project-list">
              	<table id="table"></table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
   <div class="modal fade" id="plus" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  <i class="fa fa-remove"></i>
            </button>
            <h4 class="modal-title" id="myModalLabel">
               添加歌曲
            </h4>
         </div>
         <div class="modal-body" id="modal-body">
	         <div class="row form-body form-horizontal m-t">
			    <div class="col-md-12">
				    <div class="form-group">
				        <label class="col-sm-3 control-label">分类：</label>
				        <div class="col-sm-8">
				            <select class="form-control" id="addCatId">
				            	<c:forEach items="${list}" var="cat">
				                	<option value="${cat.id}">${cat.name}</option>
				                </c:forEach>
				                <option value="0">未分类</option>
				            </select>
				        </div> 
				    </div>
				    <div class="form-group">
				        <label class="col-sm-3 control-label">链接：</label>
				        <div class="col-sm-8">
				            <input type="text" id="link" class="form-control" placeholder="请输入歌曲/歌单/专辑的链接">
							<span class="help-block m-b-none" style="color:#999;">如:http://music.163.com/#/song?id=5357055</span>
				        </div>
				    </div>
				</div>
			</div>
         </div>
         <div class="modal-footer" id="modal-footer">
            <button type="button" id="btn-plus-submit" class="btn btn-success">
               	确定
            </button>
         </div>
      </div>
</div>
</div>
    <script src="js/jquery.min63b9.js?v=2.1.4"></script>
    <script src="js/bootstrap.min14ed.js?v=3.3.6"></script>
    <script src="js/plugins/layer/layer.min.js"></script>
    <script src="js/plugins/loaders/loaders.css.js"></script>
    <script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
   <script type="text/javascript">
    var $table=$("#table"),$remove=$("#btn_delete");
	var loading='<main class="loaded"><div class="loaders"><div class="loader"><div class="loader-inner ball-pulse-sync">'+
	'<div></div><div></div><div></div></div></div></div></main>';
	$(function() {
			$table.bootstrapTable({
			url : "music/search",
			method : "get",
			dataType : "json",
			pagination : true, //分页
			clickToSelect : true,//点击选中该行
			checkboxHeader : true,//全选
			toolbar : "#toolbar", //工具按钮用哪个容器
			cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			idField: "id",  //标识哪个字段为id主键
			queryParams : queryParams, //查询参数
			queryParamsType: '', //参数格式,发送标准的RESTFul类型的参数请求
			silent : true, //刷新事件必须设置
			pageNumber : 1, //初始化加载第一页，默认第一页
			pageSize : 10, //每页的记录行数（*）
			sidePagination : "server", //服务端处理分页
			columns : [{
						align : 'center',
						valign : 'middle',
						width : '2%',
						checkbox : true
					},{
						title : '网易ID',
						field : 'neteaseid',
						width : '10%',
						align : 'left'
					},{
						title : '歌曲',
						field : 'song',
						width : '35%',
						align : 'left'
					},{
						title : '歌手',
						field : 'singer',
						width : '25%',
						align : 'left'
					},{
						title : '分类',
						field : 'category',
						width : '25%',
						align : 'left'
					},{
						title : '删除',
						field : 'id',
						width : '25%',
						align : 'left',
						formatter : function(value,rows,index) {
							var e = "<a href='javascript:void(0)' onclick='delOne("+value+")' class='btn btn-danger btn-sm'>";
							e+="<i class='fa fa-remove'></i> 删除</a>";
							return e;
						}
					}]
		});
		// 复选框点击导致编辑删除按钮的失效有效
		$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table page-change.bs.table',function() {
			var len = $table.bootstrapTable('getSelections').length;
			$remove.prop('disabled', !len);
		});
		//搜索
		$("#btn-search").click(function() {
			$table.bootstrapTable('refresh');
		});
		//添加歌曲提交
		$("#btn-plus-submit").click(function() {
			var temp=$("#modal-footer").html();
			var link=$("#link").val();
			var catId=$("#addCatId").val();
			$("#modal-footer").html(loading);
			$.ajax({
				url:"/music/add",
				type:"post",
				data:{
					link:link,
					catId:catId
				},
				success:function(code){
					if (code==0) {
						$table.bootstrapTable('refresh');
					}else if(code==1){
						alert("部分歌曲未成功添加");
					}else if(code==2){
						alert("您的链接不正确");
					}
					$("#plus").modal('hide');
					$("#modal-footer").html(temp);
				}
			})
		});
		//批量删除
		$("#btn_delete").click(function(){
			var len = $table.bootstrapTable('getSelections').length;
			layer.confirm('确认删除这'+len+'首歌曲？', {icon: 2, title:'提示'}, function(index){
				var ids=getIdSelections().join(",");
				$.post("music/deleteByIds",{ids:ids},function(){
					$remove.prop('disabled', true);
					$table.bootstrapTable("refresh");
					layer.close(index);
				});
			},function(index){
				layer.close(index);
			});
		});
		//选择分类加载该分类下的歌曲
		$("#catId").on("change",function(){
			$table.bootstrapTable("refresh");
		})
	});
	//查询参数
	var queryParams=function(params){
		var data={
		   pageSize: params.pageSize,
		   pageNumber: params.pageNumber,
		   song: $('#song').val(),
		   catId:$('#catId').val()
		};
		return data;
	}
	// 返回所有选中项的id(二维数组[][]),如:1,3,5
	function getIdSelections() {
		return $.map($table.bootstrapTable('getSelections'), function(row) {
			return row.id;
		});
	}
	function delOne(id){
		layer.confirm('确认删除这首歌曲？', {icon: 2, title:'提示'}, function(index){
			$.post("music/deleteById",{id:id},function(){
				$table.bootstrapTable("refresh");
				layer.close(index);
			});
		},function(index){
			layer.close(index);
		});
	}
    </script>
  </body>
</html>